<!-- 提现记录详情页（仅包含提现成功或失败两种情况） -->
<template>
	<view>
		<view class="out-money-reviewing">
			<!-- 图标金额区域：提现成功时 -->
			<view class="tip-top-box" v-if="userOutMoneyData.outMoneyItemState === '2'">
				<view class="tip-icon-box">
					<u-icon name="checkmark" color="#FFF" size="60rpx"></u-icon>
				</view>
				<view class="text">
					<text>提现成功</text>
					<text class="money">￥{{userOutMoneyData.money || 0}}</text>
				</view>
			</view>
			<!-- 提现失败时 -->
			<view class="tip-top-box" v-else>
				<view class="tip-icon-box" style="background-color: #FF2E2E;">
					<u-icon name="close" color="#FFF" size="40rpx"></u-icon>
				</view>
				<view class="text">
					<text>提现失败</text>
					<text class="money" style="font-size: 30rpx;">{{userOutMoneyData.reason}}</text>
				</view>
			</view>
			<!-- 订单信息项区域 -->
			<view class="item-box">
				<text>订单编号：</text><text style="color: #141418;">{{userOutMoneyData.trade_no || ''}}</text>
			</view>
			<view class="item-box">
				<text>提现时间：</text><text style="color: #141418;">{{userOutMoneyData.create_time || ''}}</text>
			</view>
			<view class="item-box">
				<text>姓名：</text><text style="color: #141418;">{{userOutMoneyData.name || ''}}</text>
			</view>
			<block v-if="userOutMoneyData.bank_id">
				<view class="item-box">
					<text>提现至：</text><text style="color: #141418;">{{userOutMoneyData.bank_name}}</text>
				</view>
				<view class="item-box">
					<text>银行卡号：</text><text style="color: #141418;">{{userOutMoneyData.card}}</text>
				</view>
			</block>
			<block v-else>
				<view class="item-box">
					<text>提现至：</text><text style="color: #141418;">支付宝</text>
				</view>
				<view class="item-box">
					<text>支付宝账户：</text><text style="color: #141418;">{{userOutMoneyData.account || ''}}</text>
				</view>
			</block>
			<view class="item-box">
				<text>金额：</text><text style="color: #141418;">{{userOutMoneyData.money || 0}}</text>
			</view>
		</view>
		
		<!-- 联系客服区域 -->
		<view class="contact-service" @click="callServiceClick">
			<u-icon name="server-man" color="#FFF" size="60"></u-icon>
			<text>联系客服</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 模拟的用户提现数据信息
				userOutMoneyData: {},
			};
		},
		onLoad(options) {
			this.userOutMoneyData = options
			console.log(this.userOutMoneyData);
		},
		methods: {
			// 联系客服 按钮的点击跳转事件
			callServiceClick() {
				this.$u.route('/myPackageA/pages/views/my-callservice')	// 跳转到 联系客服 页面
			}
		}
	}
</script>

<style lang="scss" scoped>
	.out-money-reviewing {
		width: 750rpx;
		min-height: 100vh;
		background-color: #F4F6FA;
	}
	.tip-top-box {
		height: 341rpx;
		padding-top: 45rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.tip-icon-box {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			background-color: $u-text-color;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.text {
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
			text-align: center;
			.money {
				font-size: 60rpx;
			}
		}
	}
	.item-box {
		height: 70rpx;
		background-color: white;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #97979F;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 25rpx;
	}
	.contact-service {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		position: absolute;
		top: 70%;
		right: 24rpx;
		// bottom: 370rpx;
		background-color: $u-text-color;
		font-size: 20rpx;
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}
</style>
